<template>
  <div class="app-container">
    <div class="top-section-container">
      <div class="content-header">
        <h1>首页/<small>工作台</small></h1>
        <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>工作台</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>

    <div class="bottom-section-container dashboard-grid">
      <el-card class="box-card dashboard-card time-card">
        <template #header>
          <div class="card-header">
            <span>当前时间</span>
          </div>
        </template>
        <div class="current-time">
          <h2>{{ formattedDate }}</h2>
          <h3>{{ formattedTime }}</h3>
        </div>
      </el-card>

      <el-card class="box-card dashboard-card announcement-card">
        <template #header>
          <div class="card-header">
            <span>系统公告</span>
            <el-button class="button" text @click="viewAllAnnouncements">查看更多</el-button>
          </div>
        </template>
        <div class="announcement-list">
          <div v-for="(announcement, index) in announcements" :key="index" class="announcement-item">
            <span class="announcement-title">{{ announcement.title }}</span>
            <span class="announcement-date">{{ announcement.date }}</span>
          </div>
          <p v-if="announcements.length === 0" class="no-announcements">暂无新公告。</p>
        </div>
      </el-card>

      <el-card class="box-card dashboard-card chart-card">
        <template #header>
          <div class="card-header">
            <span>用户性别比例</span>
          </div>
        </template>
        <div class="chart-container">
          <div class="pie-chart pie-chart-1">
            <div class="slice male-slice" :style="{ '--percentage': userGenderData.male }"></div>
            <div class="slice female-slice" :style="{ '--percentage': userGenderData.female, '--start-deg': userGenderData.male * 3.6 }"></div>
            <div class="slice unknown-slice" :style="{ '--percentage': userGenderData.unknown, '--start-deg': (userGenderData.male + userGenderData.female) * 3.6 }"></div>
            <div class="center-circle"></div>
          </div>
          <div class="chart-legend">
            <div><span class="legend-dot male-dot"></span> 男性: {{ userGenderData.male }}%</div>
            <div><span class="legend-dot female-dot"></span> 女性: {{ userGenderData.female }}%</div>
            <div><span class="legend-dot unknown-dot"></span> 未知: {{ userGenderData.unknown }}%</div>
          </div>
        </div>
      </el-card>

      <el-card class="box-card dashboard-card chart-card">
        <template #header>
          <div class="card-header">
            <span>预约来源分布</span>
          </div>
        </template>
        <div class="chart-container">
          <div class="pie-chart pie-chart-2">
            <div class="slice online-slice" :style="{ '--percentage': appointmentSourceData.online }"></div>
            <div class="slice offline-slice" :style="{ '--percentage': appointmentSourceData.offline, '--start-deg': appointmentSourceData.online * 3.6 }"></div>
          </div>
          <div class="chart-legend">
            <div><span class="legend-dot online-dot"></span> 线上预约: {{ appointmentSourceData.online }}%</div>
            <div><span class="legend-dot offline-dot"></span> 线下预约: {{ appointmentSourceData.offline }}%</div>
          </div>
        </div>
      </el-card>

      <el-card class="box-card dashboard-card placeholder-card">
        <template #header>
          <div class="card-header">
            <span>待办事项</span>
          </div>
        </template>
        <div class="card-content">
          <p>您可以在此添加待处理的任务或快捷入口。</p>
          <el-button type="primary" size="small">新增任务</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted, computed } from 'vue';
import { ElMessage } from 'element-plus';

const currentTime = ref(new Date());
let timer = null;

// 计算属性，格式化日期
const formattedDate = computed(() => {
  const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
  return currentTime.value.toLocaleDateString('zh-CN', options);
});

// 计算属性，格式化时间
const formattedTime = computed(() => {
  const options = { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false };
  return currentTime.value.toLocaleTimeString('zh-CN', options);
});

// 公告数据（模拟）
const announcements = ref([
  { title: '系统升级通知：健康管理模块将于7月5日凌晨2-4点维护。', date: '2025-07-04' },
  { title: '新增体检套餐“精英健康管理套餐”已上线，欢迎查看！', date: '2025-07-01' },
  { title: '关于夏季传染病预防的温馨提示，请大家注意个人卫生。', date: '2025-06-28' },
]);

// 模拟饼图数据
const userGenderData = reactive({
  male: 55,
  female: 40,
  unknown: 5
});

const appointmentSourceData = reactive({
  online: 70,
  offline: 30
});

// 查看更多公告
const viewAllAnnouncements = () => {
  ElMessage.info('功能开发中：跳转到公告列表页面');
  // 实际项目中，这里会进行路由跳转到公告列表页面
  // router.push('/announcements');
};

// 组件挂载时启动计时器
onMounted(() => {
  timer = setInterval(() => {
    currentTime.value = new Date();
  }, 1000);
});

// 组件卸载时清除计时器
onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});
</script>

<style scoped>
/* 容器基本样式，模仿 app-container */
.app-container {
  padding: 0;
  box-sizing: border-box;
}

/* 顶部区域样式 */
.top-section-container {
  background-color: #f9f9f9;
  padding: 1.25rem 1.25rem 0.625rem;
  border-bottom: 3px solid #409EFF;
  margin-bottom: 1.25rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* 底部内容区域样式 */
.bottom-section-container {
  background-color: #ffffff;
  padding: 1.25rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  border-radius: 0.25rem;
  margin: 0 1.25rem 1.25rem 1.25rem;
  /* 启用 CSS Grid 布局 */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 响应式列 */
  gap: 1.25rem; /* 网格间距 */
}

/* 现有样式调整 */
.content-header {
  padding-bottom: 0.625rem;
}

/* 卡片样式 */
.dashboard-card {
  border-radius: 0.25rem;
  overflow: hidden; /* 确保内容不会溢出圆角 */
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 1.1rem;
  padding: 0.8rem 1rem;
}

.card-content {
  padding: 1rem;
}

/* 时间卡片特定样式 */
.time-card {
  grid-column: span 1; /* 占据一列 */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中内容 */
  align-items: center; /* 水平居中内容 */
  min-height: 150px; /* 最小高度 */
}
.time-card .el-card__header {
  padding-bottom: 0; /* 调整 header 底部间距 */
  border-bottom: none; /* 移除 header 底部边框 */
}
.current-time h2 {
  font-size: 1.8rem;
  color: #333;
  margin-bottom: 0.5rem;
}
.current-time h3 {
  font-size: 1.4rem;
  color: #666;
  margin-top: 0;
}

/* 公告栏卡片特定样式 */
.announcement-card {
  grid-column: span 2; /* 占据两列 */
}

@media (max-width: 768px) {
  .announcement-card {
    grid-column: span 1; /* 小屏幕时只占据一列 */
  }
}

.announcement-list {
  padding: 0 1rem 1rem;
}
.announcement-item {
  display: flex;
  justify-content: space-between;
  padding: 0.6rem 0;
  border-bottom: 1px dashed #eee;
  font-size: 0.95rem;
  color: #555;
}
.announcement-item:last-child {
  border-bottom: none;
}
.announcement-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 10px;
}
.announcement-date {
  color: #999;
  font-size: 0.85rem;
}
.no-announcements {
  text-align: center;
  color: #999;
  padding: 1rem 0;
}

/* 饼图卡片样式 */
.chart-card {
  grid-column: span 1; /* 占据一列 */
}

.chart-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
}

.pie-chart {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 1rem;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
  background-color: #f0f0f0; /* 默认背景，以防切片未填满 */
}

.pie-chart .slice {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0 100%, 0 0); /* 扇形裁剪路径 */
  transform-origin: 50% 50%;
  transform: rotate(var(--start-deg, 0deg));
  background: conic-gradient(
  var(--color-start, transparent) 0deg,
  var(--color-end, transparent) var(--percentage)%,
  transparent var(--percentage)% 360deg
  );
}

/* 模拟饼图切片颜色和数据 */
/* Pie Chart 1: User Gender */
.pie-chart-1 .male-slice {
  background: conic-gradient(#409EFF calc(var(--percentage) * 1%), transparent calc(var(--percentage) * 1%));
}
.pie-chart-1 .female-slice {
  background: conic-gradient(#F56C6C calc(var(--percentage) * 1%), transparent calc(var(--percentage) * 1%));
}
.pie-chart-1 .unknown-slice {
  background: conic-gradient(#909399 calc(var(--percentage) * 1%), transparent calc(var(--percentage) * 1%));
}

/* Pie Chart 2: Appointment Source */
.pie-chart-2 .online-slice {
  background: conic-gradient(#67C23A calc(var(--percentage) * 1%), transparent calc(var(--percentage) * 1%));
}
.pie-chart-2 .offline-slice {
  background: conic-gradient(#E6A23C calc(var(--percentage) * 1%), transparent calc(var(--percentage) * 1%));
}

.pie-chart .center-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px; /* 圆心大小 */
  height: 50px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 20px;
  font-size: 0.9rem;
  color: #666;
}
.legend-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}
.male-dot { background-color: #409EFF; }
.female-dot { background-color: #F56C6C; }
.unknown-dot { background-color: #909399; }
.online-dot { background-color: #67C23A; }
.offline-dot { background-color: #E6A23C; }


/* 更多内容卡片占位样式 */
.placeholder-card {
  grid-column: span 1; /* 占据一列 */
}

/* 响应式调整 */
@media (max-width: 992px) {
  .bottom-section-container {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

@media (max-width: 768px) {
  .bottom-section-container {
    grid-template-columns: 1fr; /* 小屏幕时单列布局 */
  }
}
</style>